---
title: Busca de Dados
description: Aprenda como buscar dados remotamente com Astro utilizando a API fetch.
i18nReady: true
---

Arquivos `.astro` podem buscar dados remotamente para te ajudar a gerar suas páginas.

## `fetch()` em Astro

Todos os [componentes Astro](/pt-br/basics/astro-components/) tem acesso a [função global `fetch()`](https://developer.mozilla.org/pt-BR/docs/Web/API/fetch) em seus scripts do componente para fazer requisições HTTP à APIs usando a URL completa (e.x. https://example.com/api ou `Astro.url + "/api"`).

Essa chamada ao `fetch` será executada em tempo de build, e os dados estarão disponíveis ao template do componente para gerar HTML dinâmico. Se o modo [SSR](/pt-br/guides/server-side-rendering/) estiver habilitado, quaisquer chamadas a `fetch()` serão executadas em runtime.

💡 Aproveite-se do [**top-level await**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await) dentro do script do seu componente Astro.

💡 Passe os dados buscados para componentes Astro e de outros frameworks como props.

```astro /await fetch\\(.*?\\)/
---
// src/components/Usuario.astro
import Contato from '../components/Contato';
import Localizacao from '../components/Localizacao.astro';

const resposta = await fetch('https://randomuser.me/api/');
const dados = await resposta.json();
const usuarioAleatorio = dados.results[0];
---
<!-- Dados buscados em tempo de build podem ser renderizados no HTML -->
<h1>Usuário</h1>
<h2>{usuarioAleatorio.name.first} {usuarioAleatorio.name.last}</h2>

<!-- Dados buscados em tempo de build podem ser passados aos componentes como props -->
<Contato client:load email={usuarioAleatorio.email} />
<Localizacao cidade={usuarioAleatorio.location.city} />
```

:::note
Lembre-se, todos os dados em componentes Astro são buscados quando o componente é renderizado.

Seu site Astro após o deploy irá buscar os dados **uma vez, em tempo de build**. No desenvolvimento, você verá a busca de dados ao recarregar componentes. Se você precisa buscar dados múltiplas vezes no lado do cliente, utilize um [componente de framework](/pt-br/guides/framework-components/) ou um [script no lado do cliente](/pt-br/guides/client-side-scripts/) em um componente Astro.
:::


## `fetch()` em Componentes de Frameworks

A função `fetch()` também está globalmente disponível a qualquer [componente de framework](/pt-br/guides/framework-components/):

```tsx title="src/components/Filmes.tsx" /await fetch\\(.*?\\)/
import type { FunctionalComponent } from 'preact';

const dados = await fetch('https://exemplo.com/filmes.json').then((resposta) =>
  resposta.json()
);

// Componentes que são renderizados no momento de build também fazem logs na interface de linha de comando.
// Quando renderizado com uma diretiva client:*, eles também irão fazer logs no console do navegador.
console.log(dados);

const Filmes: FunctionalComponent = () => {
// Exibe o resultado na página
  return <div>{JSON.stringify(dados)}</div>;
};

export default Filmes;
```


### Consultas GraphQL

Astro também pode utilizar `fetch()` para consultar um servidor GraphQL com qualquer consulta GraphQL válida.

```astro title="src/components/Filme.astro" "await fetch"
---
const resposta = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
  {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        query getFilm ($id:ID!) {
          film(id: $id) {
            title
            releaseDate
          }
        }
      `,
      variables: {
        id: "ZmlsbXM6MQ==",
      },
    }),
  });

const json = await resposta.json();
const { film } = json.data;
---
<h1>Buscando informações sobre Star Wars: Uma Nova Esperança</h1>
<h2>Título: {film.title}</h2>
<p>Ano: {film.releaseDate}</p>
```

## Busque de um CMS Headless

Componentes Astro podem buscar dados de seu CMS favorito e então renderizá-lo como o conteúdo de sua página. Utilizando [rotas dinâmicas](/pt-br/guides/routing/#rotas-dinâmicas), componentes podem até mesmo gerar páginas com base no conteúdo do seu CMS.

Veja nossos [Guias de CMS](/pt-br/guides/cms/) para mais detalhes em como integrar o Astro com CMSes headless incluindo Storyblok, Contentful e WordPress.

## Conteúdo feitos pela comunidade

- [Criando uma aplicação Full-Stack com Astro + GraphQL (Em Inglês)](https://robkendal.co.uk/blog/how-to-build-astro-site-with-graphql/)
